<script lang="ts" setup>
import { LayoutSider, MixMenu, TopLeft, TopRight } from '@/layouts/common'

const props = withDefaults(
  defineProps<{
    headerHeight?: number
    siderWidth?: number
  }>(),
  {
    headerHeight: 48,
    siderWidth: 240,
  },
)
defineEmits(['update:collapsed'])
const appStore = useAppStore()
const { layout } = storeToRefs(appStore)

const headerHeightVar = computed(() => `${props.headerHeight}px`)
const contentHeightVar = computed(() => `calc(100vh - ${props.headerHeight}px)`)
</script>

<template>
  <n-layout class="h-screen">
    <n-layout-header
      class="pro-admin-mix-layout-header !bg-emerald-600 flex items-center justify-between px-6"
    >
      <TopLeft />
      <TopRight />
    </n-layout-header>
    <n-layout
      class="pro-admin-mix-layout-content"
      has-sider
      style="--n-color: var(--pro-admin-layout-content-bg)"
    >
      <LayoutSider
        :collapsed-width="layout.siderCollapsedWidth"
        :show-trigger="layout.showSiderTrigger"
        :width="siderWidth"
        bordered
        collapse-mode="width"
        @update:collapsed="$event => $emit('update:collapsed', $event)"
      >
        <MixMenu />
      </LayoutSider>
      <n-layout-content
        class="m-3"
        content-style="padding: 1px;"
        style="--n-color: var(--pro-admin-layout-content-bg)"
      >
        <router-view />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<style scoped>
.pro-admin-mix-layout-header {
  height: v-bind(headerHeightVar);
}

.pro-admin-mix-layout-content {
  height: v-bind(contentHeightVar);
}
</style>
